{% extends 'service-details.html' %}

{% block Graph %}
 <canvas id="barChart" style="max-height: 400px;"></canvas>
      <script>
        document.addEventListener("DOMContentLoaded", () => {
            const labels = [{% for label in labels %}'{{ label }}'{% if not loop.last %}, {% endif %}{% endfor %}];
            const data = [{% for datum in data %}{{ datum }}{% if not loop.last %}, {% endif %}{% endfor %}];
            const backgroundColor = [{% for color in colors %}'{{color}}'{% if not loop.last %}, {% endif %}{% endfor %}];

            new Chart(document.querySelector('#barChart'), {
                type: 'bar',  // 修改为 'bar' 类型
                data: {
                    labels: labels,
                    datasets: [{
                        label: '本次测评数据',
                        data: data,
                        backgroundColor: backgroundColor,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: '原始得分柱状图'
                        }
                    }
                }
            });
        });
      </script>
{% endblock %}